import { useState } from 'react'
import { FileInputBox } from '@/views/gifEdit/fileInuputBox'
import { EditBox } from '@/views/gifEdit/editBox'
import { GifResult, processGIF } from '@/lib/gifEdit/gif'
import styles from './index.module.scss'
export default function GifEditPage() {
  const [showInputBox, setShowInputBox] = useState(true)
  const [showEditBox, setShowEditBox] = useState(false)
  const [gifResult, setGifResult] = useState<GifResult>(null)
  async function onFileChange(file: File) {
    setShowInputBox(false)
    const result = await processGIF(file)
    setGifResult(result)
    setShowEditBox(true)
  }
  return (
    <div className={styles['gif-edit-page']}>
      <FileInputBox show={showInputBox} onFileChange={onFileChange} />
      <EditBox
        show={showEditBox}
        images={gifResult?.frames}
        width={gifResult?.width}
        height={gifResult?.height}
        duration={gifResult?.duration}
        onReupload={() => {
          setShowEditBox(false)
          setShowInputBox(true)
          setGifResult(null)
        }}
      />
    </div>
  )
}
